<template>
  <div>
    <a :href="link" class="link">帐户信息</a>

    <div class="banner">
      <img
        class="bannerImg"
        src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bg_cloud_banner.png"
      />
      <p
        class="showShopOpen"
        v-if="showShopModel === 'D0'"
        @click="findShopModelClick('D0')"
      >
        <i>D</i>
        <i>+0</i>
      </p>
      <p class="showShopOpen" v-else @click="findShopModelClick('T1')">
        <i>T</i>
        <i>&nbsp;+1</i>
      </p>
      <!-- <p class="info">
        <span class="label">帐户金额:</span>
        <span class="value">{{allAmount}}</span>
      </p>
      <p class="info">
        <span class="label">在途资金:</span>
        <span class="value">{{freezeAmount}}</span>
      </p>-->
      <p class="balance-text">{{allAmount}}</p>
      <p class="tiptext">账户余额(元)</p>
      <div class="cash-btn" @click="handleWithdraw">提 现</div>
      <div class="info">
        <p>在途资金(元)</p>
        <p class="value">{{freezeAmount}}</p>
      </div>
    </div>
    <div v-if="memberType===2" class="switch-wrap">
      <span class="label">提现到</span>
      <span style="padding-right:5px">对私帐户</span>
      <i-switch v-model="form.withdrawType" @change="handleSwitchType"></i-switch>
      <span style="padding-left:5px">对公帐户</span>
    </div>
    <!-- <div class="input-wrap">
      <p class="label">提现 （提现时间：7：00-20：00）</p>
      <div class="input-field2">
        <input
          class="input-block"
          type="digit"
          :placeholder="form.orderAmount"
          placeholder-style="color:#e69734"
          @change="orderAmountChange"
        />
        <span class="btn-text" @click="handleWithdraw">提现</span>
      </div>
    </div>-->
    <div class="list-title">云账户明细</div>

    <!-- <div class="usableMoney">可提现资金：￥{{allAmount}}</div> -->

    <!-- 20190701 添加云账户提现记录 -->
    <!-- <div class="depositTitle">
      <p></p>
      <span>提现记录</span>
      <p></p>
    </div>-->
    <scroll-view
      class="scroll-wrap no-scroll-bar"
      style="height:calc(100% - 243px + 16px + 30px + 53px)"
      scroll-y
      @scrolltolower="handleLoadMore"
    >
      <div class="depositList" v-for="(item,index) in depositList" :key="index">
        <div class="border-bottom-div">
          <p class="left">{{item.shopName}}</p>
          <div class="right">
            <p>{{item.amount}}元</p>
            <span>{{item.createDate}}</span>
          </div>
        </div>
      </div>
      <p v-if="alreadyLastPage" class="end-tip">没有更多了</p>
    </scroll-view>

    <div class="popup-window" :class="{show:showConfirm}">
      <span class="close-icon" @click="handleHide">&times;</span>
      <div class="popup-wrap">
        <div class="input-field">
          <input
            v-model="form.verificationCode"
            class="input-block"
            type="text"
            placeholder="请输入验证码"
            placeholder-class="placeholder-part"
            maxlength="6"
          />
          <span class="btn-text" @click="cloudAccountWithdraw2">确认</span>
        </div>
      </div>
    </div>

    <div class="bankCardBox" v-if="selectBankCard">
      <div class="bankCardCont">
        <div class="bankBtnBox">
          <span>提现银行卡</span>
          <button class="bankBtn" @click="okBankCard">确定</button>
        </div>
        <div class="select-list">
          <i-radio-group :current="bankName" @change="handleChangeBankCard">
            <div v-for="(item,idx) in cardList" :key="idx" class="radio-line">
              <!-- <i-radio position="right" :value="item.bankName"></i-radio> -->
              <i-radio class="i-radio" :value="item.bankName"></i-radio>
              <span class="bankCardTailSpan">尾号：{{item.bankCardTail}}</span>
              <!-- <div class="raio-line-text">
                <span>{{item.bankName}}</span>
                <span>尾号：{{item.bankCardTail}}</span>
              </div>-->
            </div>
          </i-radio-group>
        </div>
        <div class="add-new">
          <span class="plus-icon" @click="showNewTypeForm">添加银行卡</span>
        </div>
      </div>
      <div class="zz" @click="zzClick"></div>
    </div>
    <div class="zz" v-if="isHint"></div>
    <div class="hintBox" v-if="isHint">
      <img
        src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bulb.png"
        mode="widthFix"
      />
      <p>当前到账模式：{{showShopModel}}</p>
      <div>
        <p>到账模式的相关说明</p>
        <p>（1）T1：商家当日货款先进入在途资金，无法完成提现动作，次日凌晨4：00才会进入云账户的账户余额，进入账户余额后的资金可实现提现到账。</p>
        <p>（2）D0：商家当日货款直接进入云账户余额，可实现提现到账。</p>
        <span>备注：在途资金将在下个工作日（除周末及法定节假日）清算进入云账户余额</span>
      </div>
      <button class="gradient-btn-blue" @click="colseHintClick">我知道了</button>
    </div>
  </div>
</template>

<script>
import {} from '@/utils'
import {
  FIND_CLOUD_ACCOUNT_INFO,
  FIND_CLOUD_ACCOUNT_CARD_INFO,
  FIND_CLOUD_ACCOUNT_BALANCE,
  CLOUD_ACCOUNT_WITHDRAW,
  CLOUD_ACCOUNT_WITHDRAW_CONFIRM,
  /** 新云账户 **/
  YST_FIND_MEMBER_INFO,
  YST_FIND_ACCOUNT_BALANCE,
  YST_FIND_BIND_CARD,
  LI_ZHENG_GET_IP,
  FIND_PAGE_BY_RELATE_MAN_API,
  FIND_SHOP_MODEL_INFO_API
} from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      balance: {},
      memberType: 3,
      form: {
        withdrawType: false,
        orderAmount: '0.00',
        verificationCode: '',
        cardNo: '',
        consumerIp: '110.184.163.73'
      },
      bizOrderNo: '',
      showConfirm: false,
      cardList: [],
      platform: 1, // 提现访问终端
      selectBankCard: false,
      bankName: '',
      currentPage: 1,
      alreadyLastPage: false,
      depositList: [],
      ar: ['7:00', '20:00'],
      showShopModel: '',
      isHint: false
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    },
    link () {
      let type = ''
      if (this.memberType === 3) {
        type = 'PERSONAL'
      } else if (this.memberType === 2) {
        type = 'COMPANY'
      }
      return '/pages/mine/cloud-account/info/main?memberType=' + type
    },
    allAmount () {
      return (
        this.formatMoney(this.balance.allAmount) -
        this.formatMoney(this.balance.freezeAmount)
      ).toFixed(2)
    },
    freezeAmount () {
      return this.formatMoney(this.balance.freezeAmount)
    },
    checkTime () {
      const vm = this
      let d = new Date()
      let current = parseInt(d.getHours()) * 60 + parseInt(d.getMinutes())
      let arbegin = vm.ar[0].split(':')
      let arend = vm.ar[1].split(':')
      let b = parseInt(arbegin[0]) * 60 + parseInt(arbegin[1])
      let e = parseInt(arend[0]) * 60 + parseInt(arend[1])

      if (current >= b && current <= e) {
        return true
      } else {
        return false
      }
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.emptyInit()
    this.getxcxIP()
    this.getAccountInfo()
    this._yzhDepositList()
    // this.getCloudAccountInfo() // 老云账户
    this.findShopModelInfoApi() // 查询店铺开店模式
  },
  methods: {
    orderAmountChange (e) {
      this.form.orderAmount = e.target.value
    }, // 新的获取orderAmount的值
    getAccountInfo () {
      const vm = this
      let params = {
        identity: 'SHOP',
        relateId: vm.account.shopId
      }
      YST_FIND_MEMBER_INFO(params)
        .then(r => {
          if (r.data.code === '0') {
            if (r.data.data) {
              vm.findAccountBalance()
              vm.$cookie.set('cloud-account-info', r.data.data)
            } else {
              vm
                .$alert(
                  '您暂未开通云账户，请到爱卡卡开店宝pc端管理系统登录开通。详情请咨询400-888-5115'
                )
                .then(r => {
                  vm.$router.go(-1)
                })
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 新云账户接口-查询是否开通了云账户
    findAccountBalance () {
      const vm = this
      let params = {
        identity: 'SHOP',
        relateId: vm.account.shopId
      }
      YST_FIND_ACCOUNT_BALANCE(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.balance = r.data.data
            vm.getBindCardList()
          } else {
            vm
              .$alert(
                r.data.message +
                  '请到爱卡卡开店宝pc端管理系统查询详情。详情请咨询400-888-5115'
              )
              .then(r => {
                vm.$router.go(-1)
              })
            // vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 新云账户接口-查询余额
    getBindCardList () {
      const vm = this
      let params = {
        identity: 'SHOP',
        relateId: vm.account.shopId
      }
      YST_FIND_BIND_CARD(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.cardList = r.data.data || []
            if (vm.cardList) {
              vm.cardList.forEach(_ => {
                _.bankCardTail = _.bankCardNo.substr(-4)
              })
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 新云账户接口-查询绑定银行卡
    showNewTypeForm () {
      this.$alert(
        '暂不支持绑定银行卡，请到爱卡卡开店宝pc端管理系统登录开通。详情请咨询400-888-5115'
      )
    },
    handleChangeBankCard (e) {
      let val = e.target.value
      this.bankName = val
    },
    okBankCard () {
      const vm = this
      for (let i = 0; i < vm.cardList.length; i++) {
        if (vm.cardList[i].bankName === vm.bankName) {
          vm.form.cardNo = vm.cardList[i].bankCardNo
          vm.cloudAccountWithdraw()
          return false
        } else {
          vm.$toast('还没有选择提现银行卡')
        }
      }
    }, // 选择完银行卡后的提现按钮
    getxcxIP () {
      const vm = this
      LI_ZHENG_GET_IP()
        .then(r => {
          if (r.data.code === '0') {
            vm.form.consumerIp = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {})
    },
    zzClick () {
      this.selectBankCard = false
    },

    getCloudAccountInfo () {
      const vm = this

      FIND_CLOUD_ACCOUNT_INFO(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            let { memberInfo, memberType } = JSON.parse(r.data.data)
            vm.memberType = memberType
            if (!memberInfo) {
              return false
            } else if (memberType === 3) {
              // 个人云账户
              if (memberInfo.isIdentityChecked) {
                vm.judgementPersonal(memberInfo)
              } else {
                // 实名认证页面
                // vm.$router.replace(
                //   '/pages/mine/cloud-account/step6/main?bizUserId=' +
                //     memberInfo.bizUserId
                // )
                console.log('未认证1')
              }
            } else if (memberType === 2) {
              // 企业云帐户
              vm.judgementCompany(memberInfo)
            }
            vm.$cookie.set('cloud-account-info', memberInfo)
          } else if (!r.data.data) {
            // vm.$router.replace('/pages/mine/cloud-account/step1/main')
            console.log('未认证2')
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getBindCardInfo (state) {
      const vm = this

      FIND_CLOUD_ACCOUNT_CARD_INFO(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            if (r.data.data) {
              // 已绑卡
              vm.getBalance()
            } else if (state) {
              // 去绑定银行卡
              // vm.$router.replace(
              //   '/pages/mine/cloud-account/step3/personal/main'
              // )
              console.log('绑英航卡')
            } else {
              // 去绑定手机
              vm.$router.replace(
                '/pages/mine/cloud-account/step2/personal/main'
              )
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getBalance () {
      const vm = this

      FIND_CLOUD_ACCOUNT_BALANCE(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            // vm.balance = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    judgementPersonal (info) {
      let { isIdentityChecked, isPhoneChecked } = info
      this.getBindCardInfo(isIdentityChecked || isPhoneChecked)
    },
    judgementCompany (info) {
      const vm = this

      let { status, failReason } = info

      if (status === 3) {
        vm.$alert(failReason, '审核失败').then(r => {
          vm.$router.replace('/pages/mine/cloud-account/step2/company/main')
        })
      } else {
        vm.getBalance()
      }
    },
    formatMoney (money) {
      if (money || money === 0) {
        return (money * 0.01).toFixed(2)
      } else {
        return ''
      }
    },
    findShopModelClick (value) {
      this.isHint = true
    },
    colseHintClick () {
      this.isHint = false
    },

    handleSwitchType (e) {
      let val = e.target.value
      this.form.withdrawType = val
    },
    handleWithdraw () {
      // console.log(this.checkTime)
      // if (!this.form.orderAmount) {
      //   this.$toast('请输入提现金额')
      // } else if (this.form.orderAmount * 100 > this.allAmount * 100) {
      //   this.$toast('提现金额大于已有金额')
      // } else if (this.cardList.length <= 0) {
      //   this.$alert(
      //     '您暂未绑定银行卡，请到爱卡卡开店宝pc端管理系统登录开通。详情请咨询400-888-5115'
      //   ).then(r => {
      //     this.$router.go(-1)
      //   })
      // } else {
      // }
      if (this.checkTime) {
        // this.selectBankCard = true
        this.$router.push(
          '/pages/mine/cloud-account/getcash/main?allAmount=' + this.allAmount
        )
      } else {
        this.$toast('请按规定时间提现')
      }
    },
    handleHide () {
      this.showConfirm = false
      this.selectBankCard = false
      setTimeout(() => {
        this.form.withdrawType = false
        this.form.orderAmount = '0.00'
        this.form.verificationCode = ''
        this.bizOrderNo = ''
      }, 300)
    },
    cloudAccountWithdraw () {
      const vm = this

      let params = {
        identity: 'SHOP',
        relateMan: vm.account.shopId,
        cardNo: vm.form.cardNo,
        orderAmount: vm.form.orderAmount * 100,
        source: vm.platform,
        withdrawType: vm.form.withdrawType ? 2 : 1 // 1 对私 // 2 对公
      }

      CLOUD_ACCOUNT_WITHDRAW(params)
        .then(r => {
          if (r.data.code === '0') {
            let { merOrderNum } = r.data.data
            vm.bizOrderNo = merOrderNum
            vm.showConfirm = true
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    cloudAccountWithdraw2 () {
      const vm = this

      if (!vm.form.verificationCode) {
        vm.$toast('请输入验证码')
        return false
      }

      let params = {
        orderNo: vm.bizOrderNo,
        consumerIp: vm.form.consumerIp,
        code: vm.form.verificationCode,
        identity: 'SHOP',
        relateId: vm.account.shopId
      }

      CLOUD_ACCOUNT_WITHDRAW_CONFIRM(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('操作成功', '').then(() => {
              vm.handleHide()
              // vm.$toast('操作成功')
              // vm.getBalance()
              vm.findAccountBalance()
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {})
    },
    emptyInit () {
      this.selectBankCard = false
      this.showConfirm = false
      this.form = {
        withdrawType: false,
        orderAmount: '0.00',
        verificationCode: '',
        cardNo: '',
        consumerIp: '110.184.163.73'
      }
      this.cardList = []
      this.bizOrderNo = ''
      this.depositList = []
      this.currentPage = 1
    },
    _yzhDepositList () {
      const vm = this
      FIND_PAGE_BY_RELATE_MAN_API(vm.account.shopId, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { list, isFirstPage, isLastPage } = r.data.data
            vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    printList (list, isFirst, isLast) {
      const vm = this
      list.forEach(_ => {
        if (_.identity === 'SHOP') {
          _.shopName = '店铺'
        } else {
          _.shopName = '其他'
        }
        _.amount = _.amount.toFixed(1)
      })
      if (isFirst) {
        vm.depositList = list
        if (isLast || !list.length) {
          vm.alreadyLastPage = true
        } else {
          vm.alreadyLastPage = false
          vm.currentPage += 1
        }
      } else if (isLast) {
        vm.depositList.push(...list)
        vm.alreadyLastPage = true
      } else {
        vm.depositList.push(...list)
        vm.alreadyLastPage = false
        vm.currentPage += 1
      }
    },
    findShopModelInfoApi () {
      const vm = this
      FIND_SHOP_MODEL_INFO_API(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.showShopModel = r.data.data.depositType
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this._yzhDepositList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.link {
  width: 95%;
  margin: 8px auto;
  text-align: right;
  font-size: 12px;
  color: #000000;
}
.banner {
  font-size: 15px;
  // display: flex;
  position: relative;
  width: 95%;
  margin: auto;
  height: 150px;
  > .bannerImg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  > .showShopOpen {
    position: absolute;
    top: 12px;
    right: 12px;
    border-bottom: 1px solid #fff;
    display: flex;
    align-items: center;
    padding: 0 3px;
    i:first-child {
      color: #ffc333;
      font-size: 12px;
      font-style: oblique;
    }
    i:last-child {
      color: #fff;
      font-size: 15px;
      font-style: oblique;
    }
  }
  > .info {
    display: flex;
    width: auto;
    justify-content: space-between;
    padding: 10px 0;
    margin: 0 20px;
    border-top: 1px solid #ffffff;
    color: #fff;
    .value {
      font-size: 16px;
    }
  }
  > .balance-text {
    color: #fff;
    font-size: 22px;
    text-align: center;
    padding: 10px 0 0;
  }
  > .tiptext {
    text-align: center;
    color: rgb(189, 195, 209);
    font-size: 13px;
    padding-top: 0;
  }
  > .cash-btn {
    width: 75px;
    height: 30px;
    background: #ced0ff;
    border-radius: 30px;
    color: rgb(93, 113, 255);
    font-size: 13px;
    text-align: center;
    line-height: 30px;
    margin: 10px auto;
  }
}
.switch-wrap {
  padding: 15px 15px 0;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  > .label {
    flex-grow: 1;
  }
}
.list-title {
  font-weight: bold;
  font-size: 17px;
  text-align: center;
  margin: 10px 0;
}
.input-wrap,
.popup-wrap {
  padding: 15px;
  font-size: 15px;
  > .label {
    margin-bottom: 10px;
  }
  > .input-field {
    padding: 5px 10px;
    border: 1px solid $light-gray;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > .input-block {
      flex-grow: 1;
    }
    > .btn-text {
      color: $blue;
      padding: 0 5px;
      font-size: 18px;
    }
  }
  .input-field2 {
    padding: 5px 10px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > .input-block {
      flex-grow: 1;
      color: #e69734;
      font-size: 20px;
    }
    > .btn-text {
      color: #e69734;
      padding: 0 5px;
      font-size: 18px;
    }
  }
}
.usableMoney {
  width: 95%;
  margin: 0 auto 0px;
  font-size: 12px;
  color: #666;
}
.popup-window {
  display: flex;
  justify-content: center;
  align-items: center;
  > .popup-wrap {
    background-color: $white;
    width: 280px;
    border-radius: 8px;
  }
}
.bankCardBox {
  position: relative;
  .bankCardCont {
    position: fixed;
    bottom: 0;
    z-index: 5;
    width: 100%;
    padding: 10px 15px;
    background: #fff;
    .bankBtnBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0;
      span {
        font-size: 15px;
      }
      .bankBtn {
        font-size: 12px;
        margin: 0;
        padding: 0;
        background-color: $blue;
        color: $white;
        height: 20px;
        width: 50px;
        line-height: 20px;
        border-radius: 10px;
      }
    }
    .select-list {
      max-height: calc(48px * 3);
      overflow: hidden;
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .radio-line {
        position: relative;
        border-bottom: 1px solid $light-gray;
        display: flex;
        align-items: center;
        .i-radio {
          width: 100%;
        }
        .bankCardTailSpan {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translate(0, -50%);
          font-size: 14px;
          color: #000000;
        }
        .raio-line-text {
          font-size: 14px;
          color: #000000;
          span:first-child {
            margin-right: 16px;
          }
        }
        &:first-child {
          border-top: 1px solid $light-gray;
        }
        .tip {
          position: absolute;
          font-size: 12px;
          color: $gray;
          position: absolute;
          top: 50%;
          right: 60px;
          transform: translateY(-50%);
          width: 150px;
          > .first {
            display: inline-block;
            width: 50%;
          }
        }
        .small-delete-btn {
          padding: 0;
          margin: 0;
          width: 50px;
          font-size: 12px;
          background-color: $red;
          color: $white;
          height: 20px;
          line-height: 20px;
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
      }
    }
    .add-new {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
    }
    .plus-icon {
      font-size: 12px;
      display: inline-flex;
      align-items: center;
      &::before {
        content: '+';
        display: block;
        width: 14px;
        height: 14px;
        font-size: 14px;
        line-height: 14px;
        text-align: center;
        color: $white;
        background-color: $blue;
        border-radius: 50%;
        margin-right: 5px;
      }
    }
  }
  .zz {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000000;
    opacity: 0.3;
  }
}
.depositTitle {
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  p {
    width: 130px;
    border-top: 1px solid $blue;
  }
  span {
    font-size: 14px;
    color: $blue;
  }
}
.depositList {
  padding: 0 15px;
  .border-bottom-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // border-bottom: 1px solid #bbb6b6;
    .left {
      font-size: 14px;
      color: #000000;
    }
    .right {
      padding: 10px 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-end;
      p {
        font-size: 13px;
        color: #000000;
        margin-bottom: 3px;
      }
      span {
        font-size: 12px;
        color: #bbb6b6;
      }
    }
  }
}
.end-tip {
  margin: 0;
  padding: 15px;
  text-align: center;
  color: $gray;
  font-size: 15px;
}
.zz {
  position: fixed;
  z-index: 66;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
.hintBox {
  padding: 20px 0;
  position: absolute;
  z-index: 999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  background: #fff;
  font-size: 14px;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border-radius: 6px;
  img {
    width: 30px;
    height: 60px;
  }
  > p {
    font-size: 15px;
    color: #38f;
  }
  > div {
    color: #000;
    width: 90%;
    margin: auto;
    p {
      line-height: 22px;
      margin: 10px 0;
    }
    > p:nth-child(1) {
      font-size: 13px;
      color: #666;
      margin: 10px 0;
    }
    > p:nth-child(2) {
      font-size: 12px;
    }
    > p:nth-child(3) {
      font-size: 12px;
    }
    > span {
      font-size: 12px;
      color: #f13f40;
      line-height: 22px;
      margin: 10px 0;
    }
  }
  button {
    width: 260px;
    height: 50px;
    border-radius: 25px;
    background: $new-dark-blue;
    color: #fff;
    line-height: 50px !important;
    margin: 10px 0;
  }
}
</style>